const textEl = document.getElementById('text')
const speedEl = document.getElementById('speed')
const text = 'We Love Qimingxing!'
let idx = 1
let speed = 300 / speedEl.value

writeText()

function writeText() {
    /*innerTExt：删除所有子节点，并替换为包含字符串的单个文本节点 */
    textEl.innerText = text.slice(0, idx)

    idx++

    if(idx > text.length) {
        idx = 1
    }
    /*？？？*/ 
    setTimeout(writeText, speed)
}


speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)


/* 笑话 */
const jokeEl = document.getElementById('joke')
const jokeBtn = document.getElementById('jokeBtn')

jokeBtn.addEventListener('click', generateJoke)

generateJoke()

// USING ASYNC/AWAIT  看不懂
async function generateJoke() {
  const config = {
    headers: {
      Accept: 'application/json',
    },
  }

  const res = await fetch('https://icanhazdadjoke.com', config)

  const data = await res.json()

  jokeEl.innerHTML = data.joke
}


/*搜索*/
const search = document.querySelector('.search2')
const btn = document.querySelector('.btn2')
const input = document.querySelector('.input2')

btn.addEventListener('click', () => {
    search.classList.toggle('active')
    input.focus()
})



/*多个按钮*/
const toggles = document.querySelectorAll('.toggle')
const good = document.querySelector('#good')
const cheap = document.querySelector('#cheap')
const fast = document.querySelector('#fast')

toggles.forEach(toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target)))

function doTheTrick(theClickedOne) {
    if(good.checked && cheap.checked && fast.checked) {
        if(good === theClickedOne) {
            fast.checked = false
        }

        if(cheap === theClickedOne) {
            good.checked = false
        }

        if(fast === theClickedOne) {
            cheap.checked = false
        }
    }
} 
